<template>
    <div>
        <global-tables
            @handleAllSelect="handleAllSelect"
            :list="list"
            :isPage="true"
            :total="total"
            :loading="loading"
            :columns="columns"
            :current="search.Page"
        >
            <Form :model="search" :label-width="80">
                <div class="table-top-wrap"></div>
            </Form>
        </global-tables>
        <Modal :mask-closable="false" v-model="isModal" :title="ModalTitle" width="800">
            <div v-if="isModal">
                <Form ref="formItem" :model="formItem" :rules="ruleValidate" :label-width="80">
                    <Row>
                        <i-col :lg="{ span: 24}">
                            <Table
                                border
                                @on-selection-change="setMeal"
                                :columns="columnsModle"
                                height="500"
                                :data="list"
                            ></Table>
                        </i-col>
                    </Row>
                </Form>
            </div>
            <div slot="footer">
                <Button size="large" @click="handleClose">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit('formItem')">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
/**
 * 品牌列表
 */
import { cyclicRouting } from '@/util'
import { getModulePermission } from '@/api/user'
import GlobalTables from '@/components/GlobalTables'
import Api from './service'

export default {
    name: 'ProductsBrand',
    components: {
        GlobalTables,
    },
    data() {
        return {
            /**
             *  list 表格数据
             *  itemId 对话框id : 修改的时候需要
             *  allSelectArr 多选数据 : 批量删除或者停用
             *  loading 表格加载
             *  total 表格总页
             *  formItem 表单数据 : 提交表单对应的数据
             *  ruleValidate 表单校验
             *  isDelete 删除按钮
             *  isAddBtn 添加按钮
             *  isProhibit 停用按钮
             *  isModal 对话框状态
             *  ModalTitle  对话框标题
             *  search  请求数据 : 分页 模糊搜索
             *  columns 表头
             *  validatorSupplierID 自定义校验
             */
            //
            Description: '',
            isCheckboxGroup: false,
            list: [],
            total: 0,
            itemId: 0,
            loading: true,
            isDelete: false,
            isAddBtn: false,
            ssss: [],
            isProhibit: false,
            isModal: false,
            serviceList: [],
            allSelectArr: null,
            ModalTitle: '',
            formItem: this.initFormItem(),
            search: {},
            categoryList: [
                {
                    label: '全部',
                    value: '0'
                },
                {
                    label: '体检服务',
                    value: '4'
                },
                {
                    label: '体检套餐',
                    value: '5'
                }
            ],
            ruleValidate: {},
            /* 表头 */
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },

                {
                    title: '商品ID',
                    key: 'ID'
                },
                {
                    title: '商品名',
                    key: 'ProName',
                    align: 'center'
                },
                {
                    title: '商品简称',
                    key: 'ShortName',
                    align: 'center'
                },
                {
                    title: '商品价格',
                    key: 'PriceNew',
                    align: 'center'
                },
                {
                    title: '操作',
                    width: 80,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h(
                                'Button',
                                {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        background: '#5ab1ef',
                                        border: 'none',
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.handleBtnClick(
                                                params.row,
                                                'edit'
                                            )
                                        }
                                    }
                                },
                                '查看'
                            )
                        ])
                    }
                }
            ],
            columnsModle: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },

                {
                    title: '商品ID',
                    key: 'ID'
                },
                {
                    title: '商品名',
                    key: 'ProName',
                    align: 'center'
                },
                {
                    title: '商品简称',
                    key: 'ShortName',
                    align: 'center'
                },
                {
                    title: '商品价格',
                    key: 'PriceNew',
                    align: 'center'
                }
            ]
        }
    },
    methods: {
        /* 关闭对话框 */
        handleClose() {
            this.isModal = false
        },
        setMeal(data) {
            this.ssss = data
        },
        /* 提交 */
        handleSubmit() {
            let arr = []
            for (let item in this.ssss) {
                arr.push(this.ssss[item].ID)
            }
            Api.addTablesItem({
                ParentID: this.ParentID,
                IDs: arr.length == 0 ? '' : arr.join(',')
            }).then(res => {
                if (res.state == 'success') {
                    this.$Message.success('操作成功')
                    this.loading = true
                    this.isModal = false
                    this.getTablesListData()
                } else {
                    this.$Message.error(res.message)
                }
            })
        },
        /* 表格数据请求 */
        getTablesListData() {
            const data = this.search
            Api.getTablesList(data).then(res => {
                this.loading = false
                for (let item in res.data) {
                    res.data[item]._checked = false
                }
                this.list = res.data
            })
        },
        handleSelect() {
        },
        /* 表格查询 */
        handleSearch() {
            this.loading = true
            this.getTablesListData()
        },
        /* 对话框 */
        handleBtnClick(item, type) {
            this.ModalTitle = '新建服务'
            this.formItem = this.initFormItem()

            if (type == 'edit' || type == 'add') {
                this.itemId = 0
                if (type == 'edit') {
                    this.itemId = item.ID
                    this.ModalTitle = '修改服务'
                    Api.getItemInfo({
                        ParentID: item.ID
                    }).then(res => {
                        this.ParentID = item.ID
                        for (let item in res.data) {
                            this.arrData = res.data
                            for (let j in this.list) {
                                if (res.data[item].PID == this.list[j].ID) {
                                    this.list[item]._checked = true
                                    this.ssss.push(this.list[item])
                                }
                            }
                        }
                    })
                }
                this.isModal = true
            }
        },
        /* 表单数据 */
        initFormItem() {
            return {
                ID: 0
            }
        },
        /* 复选框选中 */
        handleAllSelect(list) {
            let arr = []
            for (let item in list) {
                arr.push(list[item].ID)
                arr.join(',')
            }
            arr = arr.join(',')
            this.allSelectArr = arr
        }
    },
    mounted() {
        /* 获取菜单的id */
        cyclicRouting(
            JSON.parse(sessionStorage.getItem('user')).menuList,
            this.$route,
            id => {
                /* 按钮权限请求 */
                getModulePermission({
                    roleid: JSON.parse(sessionStorage.getItem('user')).roleid,
                    moduleid: id
                }).then(res => {
                    /* 按钮权限赋值 */
                    for (let item in res.data) {
                        if (res.data[item].name == 'add') {
                            this.isAddBtn = true
                        } else if (res.data[item].name == 'delete') {
                            this.isDelete = true
                        } else if (res.data[item].name == 'edit') {
                            this.isEdit = true
                        } else if (res.data[item].name == 'onoff') {
                            this.isProhibit = true
                        }
                    }
                    /* 列表请求 */
                    this.getTablesListData()
                })
            }
        )
    }
}
</script>

<style>
</style>
